<template>
    <div class="login">
        <div class="content clearfix">
            <div class="left pull-left"></div>
            <div class="right pull-left">
                <div class="top"><img src="../../assets/img/u125.png"></div>
                <h2>COLIS-ESS 进销存系统</h2>
                <a-form
                        :form="form"
                        class="login-form"
                        @submit="handleSubmit">
                    <a-form-item>
                        <a-input
                                v-decorator="[
                                    'userName',
                                    { rules: [{ required: true, message: '请输入用户名' }] },
                                ]"
                                placeholder="用户名">
                            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input
                                v-decorator="[
                                    'password',
                                    { rules: [{ required: true, message: '请输入密码' }] },
                                ]"
                                type="password"
                                placeholder="密码">
                            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" style="width: 100%;" :loading="loading" html-type="submit">
                            登录
                        </a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: false,
                redirect: '',
            };
        },
        watch: {
            $route: {
                handler: function(route) {
                    this.redirect = route.query && route.query.redirect;
                },
                immediate: true
            }
        },
        beforeCreate () {
            this.form = this.$form.createForm(this);
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true;
                        this.$api.permission.userLogin(values).then(res => {
                            this.loading = false;
                            if (res && res.code !== 200) {
                                this.$message.error(res.errorMsg);
                                return;
                            }
                            this.$store.dispatch('setAuthorization', res.data);
                            this.$router.push({path: '/'});
                            // this.$router.push({path: this.pageAuthority(this.redirect)? this.redirect : '/'});
                        }).catch(err => {
                            this.loading = false;
                            this.$message.error(err.message);
                        });
                    }
                });
            }
        },
    };
</script>

<style scoped lang="scss">
    .login {
        height: 100vh;
        background-color: rgba(147, 222, 254, 1);
        position: relative;

        .content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 1050px;

            .left {
                width: 500px;
                height: 440px;
                background: url("../../assets/img/u122.png");
            }

            .right {
                width: 454px;
                height: 359px;
                background-color: #fff;
                border-radius: 10px;
                box-sizing: border-box;
                border: 1px solid rgba(121, 121, 121, 1);
                margin-top: 42px;
                margin-left: 70px;
                position: relative;
                padding: 0 50px;

                .top {
                    width: 170px;
                    height: 170px;
                    position: absolute;
                    left: 138px;
                    top: -95px;
                    background-color: #fff;
                    border-radius: 50%;
                    border: 10px solid rgba(147, 222, 254, 1);

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                h2 {
                    text-align: center;
                    margin-top: 100px;
                }
            }
        }
    }
</style>
